<template>
  <div class="addComments">
      <el-input placeholder="请输入昵称" v-model="model.nickname"></el-input>
      <el-input placeholder="请输入留言" type="textarea" v-model="model.body"></el-input>
      <div class="btn">
        <el-button @click.native="submitComment" icon="el-icon-s-promotion" circle></el-button>
        <el-button @click.native="cancelSubmit" icon="el-icon-delete-solid" circle></el-button>
      </div>
  </div>
</template>

<script>
import { formatDate } from "common/utils.js";
export default {
    props:{
        model:{
            type:Object,
            default(){
                return {}
            }
        }
    },
    methods:{
        async submitComment() {
        const myDate = new Date();
        this.model.time = formatDate(myDate, "yyyy-MM-dd hh:mm:ss");
        if (this.model.body === "") return this.$message.error("留言为空");
        const res = await this.$http.post("leaveMessages", this.model);
        this.model.nickname = "";
        this.model.body = "";
        this.$emit('getMessageList');
        },
        cancelSubmit() {
        this.model.nickname = "";
        this.model.body = "";
        },
    }
}

</script>
<style scoped lang="scss">
@media screen and (min-width: 1200px){
    .addComments {
      margin-top: 70px;
      .btn {
        margin-top: 25px;
        .el-button:nth-child(1) {
          margin-right: 20px;
        }
        .el-button {
          font-size: 18px;
        }
      }
      .el-textarea {
        margin-top: 10px;
      }
    }
}

@media screen and (max-width: 768px){
    .addComments {
      margin-top: 70px;
      .btn {
        margin-top: 10px;
        .el-button:nth-child(1) {
          margin-right: 20px;
        }
        .el-button {
          font-size: 18px;
        }
      }
      .el-textarea {
        margin-top: 10px;
      }
    }
}
</style>